<template>
  <page-view class="edit-address">
    <page-header title="地址编辑" :show-back="true"></page-header>
    <div class="content-box">
      <van-address-edit
        :area-list="areaList"
        show-delete
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        :is-saving="isSubmiting"
        :address-info="addressEditInfo"
      >
        <van-field
          name="tag"
          v-model="tag"
          label="标签"
          placeholder="请输入标签"
          required
        />
      </van-address-edit>
    </div>
  </page-view>
</template>

<script setup>
import { areaList } from "@vant/area-data";
import { Toast, Dialog } from "vant";
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import Api from "../utils/api";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const store = useStore();
const isSubmiting = ref(false);
const tag = ref("");

const addressEditInfo = reactive({
  name: "",
  tel: "",
  province: "",
  city: "",
  county: "",
  addressDetail: "",
});

const findById = async (id) => {
  let results = await Api.addressInfo.findById(id);
  console.log(results);
  results = results[0];
  addressEditInfo.name = results.person_name;
  addressEditInfo.tel = results.phone;
  tag.value = results.tag;
  let addressSplitArr = results.address.split(" ");
  addressEditInfo.province = addressSplitArr[0];
  addressEditInfo.city = addressSplitArr[1];
  addressEditInfo.county = addressSplitArr[2];
  addressEditInfo.addressDetail = addressSplitArr[3];
  let cityCode;
  let countyCode = [];
  for (let key in areaList.county_list) {
    if (areaList.county_list[key] === addressSplitArr[2]) {
      countyCode.push(key);
    }
  }
  if (countyCode.length == 1) {
    addressEditInfo.areaCode = countyCode[0];
  } else {
    for (let key in areaList.city_list) {
      if (areaList.city_list[key] === addressSplitArr[1]) {
        cityCode = key;
      }
    }
    let temp = countyCode.filter((item) =>
      item.startsWith(cityCode.substr(0, 4))
    );
    addressEditInfo.areaCode = temp[0];
  }
};
findById(route.query.id);

const onSave = async (content) => {
  isSubmiting.value = true;
  let addressInfo = {
    address: [
      content.province,
      content.city,
      content.county,
      content.addressDetail,
    ].join(" "),
    person_name: content.name,
    phone: content.tel,
    tag: tag.value,
    id: route.query.id,
  };
  await Api.addressInfo.edit(route.query.id, addressInfo);
  isSubmiting.value = false;
  let results = await Api.addressInfo.findByUid();
  store.commit("setAddressInfo", results);
  Toast.success({
    message: "地址编辑成功",
    duration: 1000,
    onClose: () => {
      router.back();
    },
  });
};
const onDelete = () => {
  Dialog.confirm({
    title: "系统",
    message: "确定要删除吗？",
  })
    .then(async () => {
      await Api.addressInfo.delete(route.query.id);
      let results = await Api.addressInfo.findByUid();
      store.commit("setAddressInfo", results);
      Toast.success({
        message: "地址删除成功",
        duration: 1000,
        onClose: () => {
          router.back();
        },
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
</style>